
<template>
  <div id="body1">
    <div class="row">
      <div class="col-xl-3 col-md-6 col-sm-6 col-sm-6">
        <stats-card>
          <div slot="header" class="icon-warning">
            <i class="nc-icon nc-chart text-warning"></i>
          </div>
          <div slot="content">
            <p class="card-category">停车场总包月用户数</p>
            <h4 class="card-title">{{form2.total_month_user}}</h4>
          </div>
          <div slot="footer">
            <i class="fa fa-refresh"></i>Updated now
          </div>
        </stats-card>
      </div>

      <div class="col-xl-3 col-md-6 col-sm-6 col-sm-6">
        <stats-card>
          <div slot="header" class="icon-success">
            <i class="nc-icon nc-light-3 text-success"></i>
          </div>
          <div slot="content">
            <p class="card-category">停车场总数</p>
            <h4 class="card-title">{{form2.parks}}</h4>
          </div>
          <div slot="footer">
            <i class="fa fa-calendar-o"></i>Last day
          </div>
        </stats-card>
      </div>

      <div class="col-xl-3 col-md-6 col-sm-6">
        <stats-card>
          <div slot="header" class="icon-danger">
            <i class="nc-icon nc-vector text-danger"></i>
          </div>
          <div slot="content">
            <p class="card-category">今日停放车总数</p>
            <h4 class="card-title">{{form2.today_parking_count}}</h4>
          </div>
          <div slot="footer">
            <i class="fa fa-clock-o"></i>Last day
          </div>
        </stats-card>
      </div>

      <div class="col-xl-3 col-md-6 col-sm-6">
        <stats-card>
          <div slot="header" class="icon-info">
            <i class="nc-icon nc-favourite-28 text-primary"></i>
          </div>
          <div slot="content">
            <p class="card-category">今日总收入</p>
            <h4 class="card-title">{{form2.today_income}}</h4>
          </div>
          <div slot="footer">
            <i class="fa fa-refresh"></i>Updated now
          </div>
        </stats-card>
      </div>
    </div>
    <div>
       <div>
          <el-select style="padding:5px 50px 30px 20px"  v-model="value" placeholder="请选择" @change="changeStatus($event)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      <div class="row">
        <div id="text1" class="col-xl-2 col-md-6 col-sm-6 col-sm-6">入口</div>
        <div id="text2" class="col-xl-2 col-md-6 col-sm-6 col-sm-6">出口</div>
        <div id="text3" class="col-xl-2 col-md-6 col-sm-6 col-sm-6">空车位</div>
        <div id="text4" class="col-xl-2 col-md-6 col-sm-6 col-sm-6">非空车位</div>
        <div id="text5" class="col-xl-2 col-md-6 col-sm-6 col-sm-6">道路</div>
        <div>
        </div>
       
      </div>
     
    </div>

    <div id="container"></div>
  </div>
</template>

 <script>
import ChartCard from "src/components/Cards/ChartCard.vue";
import StatsCard from "src/components/Cards/StatsCard.vue";
import LTable from "src/components/Table.vue";

export default {
  components: {
    LTable,
    ChartCard,
    StatsCard
  },

  data() {
    return {
      mydata: [],
      mydata2: [],
      options: [],
      tooltip: undefined,
      value: "",
      form2: {
        total_month_user:"",
        parks:"",
        today_income:"",
        today_parking_count:"",
      },
      form: {
        area_id: 61,
        enter_x: 1,
        enter_y: 1,
        exit_x: 1,
        exit_y: 1
      },
      pathlist: [
       
      ],
      mychannel: "channel61",
      myevent: "event61",
      mypusher: undefined,
      nowvalue: 0
    };
  },
  created(){
   var mypusher = new Pusher("2f0c66430a6461d96e9c", {
      cluster: "ap3",
      forceTLS: true
    });
    mypusher.subscribe("channel").bind("event", function(data) {
          var mydata = JSON.stringify(data);
          console.log(mydata);
          if (mydata.form.total_month_user != -1)
            this.form.total_month_user = mydata.form.total_month_user;
          if (mydata.form.parks != -1) this.form.parks = mydata.form.parks;
          if (mydata.form.today_parking_count != -1)
            this.form.today_parking_count = mydata.form.today_parking_count;
          if (mydata.form.today_income != -1)
            this.form.today_income = mydata.form.today_income;
          

          if (mydata.area_id >= 0 && mydata.space != []) {
            
            for (var k = 0; k < this.mydata.length; k++) {
               
              if (this.mydata[k].area_info.id == mydata.area_id) {
                this.mydata[k].area_info.space = mydata.space;
                if (k == this.nowvalue) {
                  changeStatus(k);
                }
                break;
              }
            }
          }
        });


  },
  mounted() {
    
    this.$ajax({
      method: "get",
      url: "admin/outline"
    })
      .then(res => {
        this.form2 = res.data.data;
      })
      .catch(error => {
        this.$message({
          type: "info",
          message: error + "数据刷新失败"
        });
        console.log(error);
      });
    this.$ajax({
      method: "get",
      url: "/admin/all"
    })
      .then(res => {
        this.mydata = res.data.data;
        d3.select("#text1")
          .append("svg")
          .attr("width", "20px")
          .attr("height", "20px")
          .append("rect")
          .attr("width", "20px")
          .attr("height", "20px")
          .style("fill", d3.rgb(100, 149, 237));
        d3.select("#text2")
          .append("svg")
          .attr("width", "20px")
          .attr("height", "20px")
          .append("rect")
          .attr("width", "20px")
          .attr("height", "20px")
          .style("fill", d3.rgb(0, 255, 127));
        d3.select("#text3")
          .append("svg")
          .attr("width", "20px")
          .attr("height", "20px")
          .append("rect")
          .attr("width", "20px")
          .attr("height", "20px")
          .style("fill", d3.rgb(255, 182, 193));
        d3.select("#text4")
          .append("svg")
          .attr("width", "20px")
          .attr("height", "20px")
          .append("rect")
          .attr("width", "20px")
          .attr("height", "20px")
          .style("fill", d3.rgb(238, 130, 238));
        d3.select("#text5")
          .append("svg")
          .attr("width", "20px")
          .attr("height", "20px")
          .append("rect")
          .attr("width", "20px")
          .attr("height", "20px")
          .style("fill", d3.rgb(112, 128, 144));
       console.log(res);

        for (var i = 0; i < res.data.data.length; i++) {
          if (this.mydata[i].area_info.space.length > 0) {
            var temp = {
              value: i,
              label: this.mydata[i].area_info.title
            };
            this.options.push(temp);
          }
        }
        if (this.mydata[0].area_info.space.length > 0) {
          this.value = 0;

          this.init(
            this.mydata[0].area_info.space,
            this.mydata[0].area_info.title,
            this.mydata[0].park_info,
            0
          );
        }

        // this.setGrap();
      })
      .catch(error => {
        this.$message({
          type: "info",
          message: error + "数据刷新失败"
        });
        console.log(error);
      });
  },
  methods: {
    recommand() {
      this.$ajax({
        method: "post",
        url: "park/recommend",
        data: this.form
      })
        .then(res => {
          this.pathlist = res.data.data.path;

          console.log(this.pathlist);
          if (this.mydata[0].area_info.space.length > 0) {
            this.value = 0;
            d3.select(".ok").remove();
            this.init(
              this.mydata[0].area_info.space,
              this.mydata[0].area_info.title,
              this.mydata[0].pay_info,
              0
            );
          }

          // this.setGrap();
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: error + "数据刷新失败"
          });
          console.log(error);
        });
    },
    init(correlationMatrix, name, thisdata, thisnum) {
      var labels = [
        "Var 1",
        "Var 2",
        "Var 3",
        "Var 4",
        "Var 5",
        "Var 6",
        "Var 7",
        "Var 8",
        "Var 9",
        "Var 10"
      ];

      var options = {
        container: "#container",
        data: correlationMatrix,
        labels: labels,
        start_color: "#ffffff",
        end_color: "#3498db"
      };

      var margin = { top: 50, right: 50, bottom: 100, left: 100 },
        width = correlationMatrix[0].length * 35,
        height = correlationMatrix.length * 35,
        data = options.data,
        container = options.container,
        labelsData = options.labels,
        startColor = options.start_color,
        endColor = options.end_color;

      var widthLegend = 100;

      if (!data) {
        throw new Error("Please pass data");
      }

      if (!Array.isArray(data) || !data.length || !Array.isArray(data[0])) {
        throw new Error("It should be a 2-D array");
      }

      var maxValue = d3.max(data, function(layer) {
        return d3.max(layer, function(d) {
          return d;
        });
      });
      var minValue = d3.min(data, function(layer) {
        return d3.min(layer, function(d) {
          return d;
        });
      });

      var numrows = data.length;
      var numcols = data[0].length;
      var ok = d3
        .select(container)
        .append("div")
        .attr("class", "ok");
      var oktext = ok
        .append("div")
        .attr("height", "100px")
        .attr("weight", "100px")
        .append("h3")
        .text(name);

      var table = ok.append("table").attr("class", "table");
      var tooltip = d3
        .select("#body1")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0.0);
      var titletr = table.append("tr");
      titletr.append("th").text("用户姓名");
      titletr.append("th").text("车牌号");
      titletr.append("th").text("停放天数");

      if (thisdata != null) {
        for (var i = 0; i < thisdata.length; i++) {
          var tr = table.append("tr");
          tr.append("th").text(thisdata[i].username);
          tr.append("th").text(thisdata[i].license);
          tr.append("th").text(thisdata[i].time);
        }
      }

      var svg = ok
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var x = d3.scale
        .ordinal()
        .domain(d3.range(numcols))
        .rangeBands([0, width]);

      var y = d3.scale
        .ordinal()
        .domain(d3.range(numrows))
        .rangeBands([0, height]);

      var colorMap = d3.scale
        .linear()
        .domain([minValue, maxValue])
        .range([startColor, endColor]);
      console.log(colorMap);

      var row = svg
        .selectAll(".row")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "row")
        .attr("transform", function(d, i) {
          return "translate(0," + y(i) + ")";
        });

      var cell = row
        .selectAll(".cell")
        .data(function(d) {
          return d;
        })
        .enter()
        .append("g")
        .attr("class", "cell")
        .attr("transform", function(d, i) {
          return "translate(" + x(i) + ", 0)";
        });

      row
        .selectAll(".cell")
        .append("rect")
        .attr("class", "rectt")
        .attr("width", x.rangeBand())
        .attr("height", y.rangeBand())
        .style("stroke-width", 1)
        .style("stroke", "black");

      row
        .selectAll(".cell")
        .style("fill", function(d) {
          if (d === 0) {
            //车位可用
            return d3.rgb(255, 182, 193);
          }
          if (d === -2) {
            //入口
            return d3.rgb(100, 149, 237);
          }
          if (d === -1) {
            //出口
            return d3.rgb(0, 255, 127);
          }
          if (d === 2) {
            //道路
            return d3.rgb(112, 128, 144);
          }
          if (d === 1) {
            //有车
            return d3.rgb(238, 130, 238);
          }
        })
        .on("mouseover", function(d) {
          var thistext = "";
          if (d === 0) {
            thistext = "车位可用";
          }
          if (d === -2) {
            thistext = "入口";
          }
          if (d === -1) {
            thistext = "出口";
          }
          if (d === 2) {
            thistext = "道路";
          }
          if (d === 1) {
            thistext = "有车";
          }

          tooltip
            .html(thistext)
            .style("left", d3.event.pageX - 200 + "px")
            .style("top", d3.event.pageY + 20 + "px")
            .style("opacity", 1.0);
        })
        .on("mousemove", function(d) {
          tooltip
            .style("left", d3.event.pageX - 200 + "px")
            .style("top", d3.event.pageY + 20 + "px");
        })
        .on("mouseout", function(d) {
          tooltip.style("opacity", 0.0);
        });
      if (thisnum == 0) {
        var r = 35 / 2;
        var lineData = [];
        var pathlist = this.pathlist;

        for (var i = 0; i < pathlist.length; i++) {
          var temp = {
            x: pathlist[i][1] * 35 + r,
            y: pathlist[i][0] * 35 + r
          };
          lineData.push(temp);
        }

        //线生成器
        var lineFunction = d3.svg
          .line()
          .x(function(d) {
            return d.x;
          })
          .y(function(d) {
            return d.y;
          })
          .interpolate("linear");

        //svg容器

        //把path扔到容器中-- lineData和lineFunction，并给d赋属性
        var lineGraph = svg
          .append("path")
          .attr("d", lineFunction(lineData))
          .attr("stroke", "blue")
          .attr("stroke-width", 2)
          .attr("fill", "none");
      }
    },
    TwoindexToOneIndex(data, colsnumber) {
      return data[0] * colsnumber + data[1];
    },
    changeStatus($event) {
      d3.select(".ok").remove();
      this.nowvalue = $event;
      this.init(
        this.mydata[$event].area_info.space,
        this.mydata[$event].area_info.title,
        this.mydata[$event].pay_info,
        $event
      );
    }
  }
};
</script>
<style>
.tooltip {
  position: absolute;
  width: 120;
  height: auto;
  font-family: simsun;
  font-size: 14px;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  background-color: white;
  border-radius: 5px;
}
</style>
